-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add shaders for filter() constants, and use them by default in P2D #6324
Conversation
adding an opt-out parameter made things a little more complicated (handling two optional parameters now) using shaders behind a P2D renderer also adds complexity ^ still need to handle that case
I think this is looking good, and from what I can see, I don't think useWebGL is adding too much complexity, it looks like you've gone about it in a straightforward way. |
doesn't work yet though
needed for filters that sample neighbors, such as ERODE, DILATE, BLUR
the descriptions were swapped so now they match the docs
need to fix quantize function
- a new one showing useWebGL parameter - simplify shader example, using createFilterShader and bricks.jpg
- explained why webgl is involved - explained the new parameter - balanced / removed portions considering overlap with createFilterShader() docs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The POSTERIZE shader mostly works, but it looks a little different (and a little worse imo) compared to the original pixels POSTERIZE.
example sketch with old pixels filter
example sketch with this new shader
Pixels filter code for comparison of implementation details:
Lines 289 to 308 in 6d3405f
posterize(canvas, level) { | |
const pixels = Filters._toPixels(canvas); | |
if (level < 2 || level > 255) { | |
throw new Error( | |
'Level must be greater than 2 and less than 255 for posterize' | |
); | |
} | |
const levels1 = level - 1; | |
for (let i = 0; i < pixels.length; i += 4) { | |
const rlevel = pixels[i]; | |
const glevel = pixels[i + 1]; | |
const blevel = pixels[i + 2]; | |
pixels[i] = ((rlevel * level) >> 8) * 255 / levels1; | |
pixels[i + 1] = ((glevel * level) >> 8) * 255 / levels1; | |
pixels[i + 2] = ((blevel * level) >> 8) * 255 / levels1; | |
} | |
}, |
- Not sure how to handle validating the extra filter parameter; here it throws a vanilla error when outside 2-255. But others like BLUR and THRESHOLD just do their own little validation and fail silently if the parameter is invalid. Maybe I should add some extra friendly errors for each case? (
'🌸 POSTERIZE only accepts a parameter from 2 to 255; received x'
, or'THRESHOLD only accepts a parameter between 0.0 and 1.0; received x'
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting, I'll take a look and try to suss out whats going on here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think your round was doing something weird. It should be a floor instead. See: https://editor.p5js.org/aferriss/sketches/mjQKudkIP
src/webgl/shaders/filters/erode.frag
Outdated
for (int i = 0; i < 4; i++) { | ||
vec4 color = neighbors[i]; | ||
float lum = luma(color.rgb); | ||
if (lum < curLuminance) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if the if
statement should be replaced by some sort of step
logic. I know it's good to avoid branching if statements in shaders for speed. But a simple if
statement seems easier to read and maintain
I think I documented all the important features and behaviors between the Open to suggestions as always, especially @aceslowman - I remember you said it would be nice to have an earlier disclaimer about filter shaders not working on 3D geometries, for people coming from shader land? Maybe swapping the second paragraph of |
src/webgl/p5.RendererGL.js
Outdated
} | ||
|
||
// apply shader to pg | ||
pg.shader(this.filterShader); | ||
this.filterShader.setUniform('tex0', this); | ||
this.filterShader.setUniform('texelSize', [1.0/this.width, 1.0/this.height]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we add texelSize
to the documentation for createFilterShader
?
src/webgl/shaders/filters/blur.frag
Outdated
|
||
// spread controls how far away from the center we should pull a sample from | ||
// you will start to see artifacts if you crank this up too high | ||
float spread = 4.0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lets just simplify this whole block to float spread = max(0.0, filterParameter);
and then set a default value for the filterParameter in the js that is overridden if explicitly set.
src/webgl/shaders/filters/blur.frag
Outdated
@@ -0,0 +1,50 @@ | |||
// Single-pass blur filter, taken from Adam Ferriss' repo of shader examples: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How does the output of this blur compare to the cpu one?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here's a sketch for comparison, although bricks.jpg isn't the best example to compare blur:
https://editor.p5js.org/jwong/sketches/r9fxPerPU
|
||
float luma(vec3 color) { | ||
// based on constants 77, 151, 28 from DILATE in filters.js, | ||
// even though that's different than the luminance constants used in GRAY |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is fine, haha. Probably just different implementers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jwong I think that having it match what is expected for the non-webgl filters feels best, glad to see you leave a comment about it here, I think it's helpful context.
@@ -0,0 +1,38 @@ | |||
// Increase the bright areas in an image |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that this shader can be simplified and maybe doesn't need the luma calculation. Let me know if I'm wrong but take a look here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same for erode, but it will be a min instead of max
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
max()
seems to choose that greatest of each component, compared to the luma()
way of choosing the greatest overall vector. Example:
a = (1, 1, 0)
b = (0, 0, 1)
max(a,b) = (1, 1, 1) # instead of (1, 1, 0)
Not sure if that's more desired or not. The results look similar though
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think either way is fine, if the luma calculation is more accurate to the CPU mode then disregard my comment!
change round() to floor()
// copy position with a fourth coordinate for projection (1.0 is normal) | ||
vec4 positionVec4 = vec4(aPosition, 1.0); | ||
// scale by two and center to achieve correct positioning | ||
positionVec4.xy = positionVec4.xy * 2.0 - 1.0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should change this shader to use the model view projection matrix instead. See my issue here #6367 where this shader is causing trouble because of the depth testing.
I seem to have fixed blur. Still testing and double checking things. It's promising that the parameter works as intended, and I fixed a flipping problem midway, and it works every frame, and there's no performance drops. It's much smoother than the single pass shader was. Some screenshots: |
src/webgl/p5.RendererGL.js
Outdated
// starting with parent renderer as tex0 uniform | ||
this.filterShader.setUniform('tex0', this); // vertically flips first | ||
this.filterShader.setUniform('flipped', false); // so undo it | ||
this.filterShader.setUniform('direction', [2, 0]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like the 2 here might be causing some slight pixellation, maybe we should change back to 1 for both horizontal and vertical directions
src/webgl/p5.RendererGL.js
Outdated
|
||
// do initial horizontal and vertical pass, | ||
// starting with parent renderer as tex0 uniform | ||
this.filterShader.setUniform('tex0', this); // vertically flips first |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why do we need to do these initial passes? I think we could get away with just drawing the source canvas into the pg layer without a shader, and then running the loop.
src/webgl/p5.RendererGL.js
Outdated
@@ -1015,8 +1015,18 @@ p5.RendererGL = class RendererGL extends p5.Renderer { | |||
filterShaderVert, | |||
filterShaderFrags[operation] | |||
); | |||
|
|||
// two-pass blur filter needs another shader attached to main | |||
if (operation === constants.BLUR) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What if someone is trying to use the accelerated filters from p2d mode. Won't this cause an error?
…ring the blur filter.
…ters Changes blur steps to happen inside shader instead of canvases
preflipping is not necessary now with new vertex shader
Change language around gaussian blur
Looks great! Thanks @wong-justin for working on it and @aferriss @aceslowman for reviewing. 🎉 |
Hey @wong-justin, @aferriss, and @aceslowman, First off, major props on integrating shader-based filters in p5.js! The performance gains are amazing and that's gonna dramatically increase the accessibility of the While the shader-based approach undeniably improves performance, I noticed there are still some artifacts, particularly in the I've put together a quick visual comparison using a small demo sketch you can check out, or you can just look at the image below that was generated from it. I'm wondering whether there's potential to refine the shader implementation slightly on those three in particular to minimize these visual discrepancies. Just thinking out loud here, and definitely not a show stopper but I'm curious to hear what our shader experts here have to say 😃 Again, amazing work on the PR! |
I think in the updated docs for There was also some discussion in comments about whether or not to use luma-based dilate/erode, which I believe the CPU implementation uses, and the shaders now do not use (for performance?), which probably explains some of the difference for those two filters. Also I wonder if pixel density handling affects it? I think the temp graphics layer doesn't specify pixel density so it'd use display density instead of matching the main canvas density, and Anyway we could maybe open follow-up issues to track and then iron out the differences? |
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [p5](https://togithub.com/processing/p5.js) | devDependencies | minor | [`1.7.0` -> `1.8.0`](https://renovatebot.com/diffs/npm/p5/1.7.0/1.8.0) | | [@types/p5](https://togithub.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/p5) ([source](https://togithub.com/DefinitelyTyped/DefinitelyTyped)) | devDependencies | patch | [`1.7.0` -> `1.7.3`](https://renovatebot.com/diffs/npm/@types%2fp5/1.7.0/1.7.3) | --- ### Release Notes <details> <summary>processing/p5.js (p5)</summary> ### [`v1.8.0`](https://togithub.com/processing/p5.js/releases/tag/v1.8.0) [Compare Source](https://togithub.com/processing/p5.js/compare/v1.7.0...v1.8.0) <!-- Release notes generated using configuration in .github/release.yml at v1.8.0 --> #### What's Changed 🎊 ##### WebGL In this release, p5.js added some new WebGL mode tools. Filters now run in shaders for extra speed, and you can now run custom filter shaders, even on 2D canvases. You can now cut holes in shapes with `beginContour()` and apply vector masks with `beginClip()`. You can reuse shapes more efficiently with `buildGeometry()` and instanced rendering. Finally, we have also fixed a number of bugs. *- Summary written by [@​davepagurek](https://togithub.com/davepagurek) ✨* - Add support for beginContour() and endContour() in Webgl mode by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6297 - Fix stroke rendering when drawing to framebuffers by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6304 - Adds createFilterShader() and custom shader support to the webGL filter() function by [@​wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6237 - Fix WebGL text not rendering when rotated 90 degrees by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6316 - Fix reading between nested active framebuffers by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6314 - Add methods to construct p5.Geometry from other p5 drawing functions by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6287 - Handle missing exact edge vertices in buildGeometry by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6320 - Fix strokes on framebuffers with different aspect ratios by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6339 - Fix freed geometry leaving attributes in a broken state by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6323 - Improve performance of line rendering by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6230 - Add support for webGL instancing by [@​RandomGamingDev](https://togithub.com/RandomGamingDev) in [processing/p5.js#6276 - Add shaders for filter() constants, and use them by default in P2D by [@​wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6324 - Fix clip() on both the main canvas and framebuffers by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6376 - fixed texture filtering bug in p5.Framebuffer by [@​KeyboardSounds](https://togithub.com/KeyboardSounds) in [processing/p5.js#6420 - Fix clear() on framebuffers on Intel macs by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6429 - Fix textureMode(IMAGE) + beginShape(TESS) by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6366 - fixed issue [#​6440](https://togithub.com/processing/p5.js/issues/6440) by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6446 - Erode, dilate, threshold shader filters match closer to CPU filters by [@​wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6405 - Update WebGL blur filter to match CPU blur more by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6460 - Fix camera flipping on framebuffers between push/pop calls by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6471 - Setuniform by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6474 - resolved issue [#​6399](https://togithub.com/processing/p5.js/issues/6399) by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6480 - Auto-bind filter shaders to the filter graphic by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6482 - new PR for issue [#​6383](https://togithub.com/processing/p5.js/issues/6383)(Problem for diagonal) by [@​perminder-17](https://togithub.com/perminder-17) in [processing/p5.js#6488 ##### Friendly Error System (FES) - Add Hindi translation to FES by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6272 - Re-worded lines 413 and 446 of FES Developer Notes by [@​OnexiMedina](https://togithub.com/OnexiMedina) in [processing/p5.js#6307 - Reference FES Contributor Docs inside FES Directory along with a diagram to understand usages of FES functions by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6335 - Fixed typing errors in fes_core.js documentation by [@​Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6478 - Update friendly_error_system.md by [@​Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6481 - Update fes_reference_dev_notes.md by [@​Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6486 ##### Reference Documentation Update We updated a group of p5.js Reference pages as part of 2023 Season of Docs (SoD) program, with a goal to make them more accessible and beginner-friendly. Thanks to the SoD technical writer [@​nickmcintyre](https://togithub.com/nickmcintyre) ✨. - Edit docs for math functions by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6281 - docs(typography): fix typos in example for textFont by [@​meezwhite](https://togithub.com/meezwhite) in [processing/p5.js#6401 - Edit docs for p5.Vector by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6340 - Edit docs for pixels functions by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6390 - Edit docs for loading & displaying images by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6425 - Update docs for p5.Image by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6434 - Edit docs for p5.Font by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6453 - Edit docs for image by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6424 - Edit docs for typography load and display by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6450 ##### Google Summer of Code (GSoC) 2023 Wrap up - 🌸 Added GSoC wrap up! by [@​dewanshDT](https://togithub.com/dewanshDT) in [processing/p5.js#6403 - Gsoc 23 Wrapup post by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6415 - add GSoC'23 wrapup post for Justin Wong by [@​wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6418 - Create lichlyter_gsoc\_2023.md by [@​katlich112358](https://togithub.com/katlich112358) in [processing/p5.js#6455 - Create munusshih_gsoc\_2023.md by [@​munusshih](https://togithub.com/munusshih) in [processing/p5.js#6461 ##### Other Code Update - Ask to disable printing when print() called with no arguments by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6253 - fix textWidth() and textToPoints() by [@​munusshih](https://togithub.com/munusshih) in [processing/p5.js#6184 - Fix issue where nf with 0 'right' parameter returns undefined in string by [@​limzykenneth](https://togithub.com/limzykenneth) in [processing/p5.js#6291 - Update environment.js with fix for frameRate description by [@​quinton-ashley](https://togithub.com/quinton-ashley) in [processing/p5.js#6269 - Implement clip() to shapes by [@​davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6306 - Clarified workflow for contributing documentation by [@​thatguyseven](https://togithub.com/thatguyseven) in [processing/p5.js#6312 - Clears MediaElement canvas at the beginning of every frame by [@​donaldzhu](https://togithub.com/donaldzhu) in [processing/p5.js#6309 - Clean up gruntfile release related steps by [@​Qianqianye](https://togithub.com/Qianqianye) in [processing/p5.js#6321 - fix-return-type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6326 - fix HALF_FLOAT by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6330 - Added .gitattributes to Increase compatability with Window users and line endings by [@​SilasVM](https://togithub.com/SilasVM) in [processing/p5.js#6317 - update all contributors setup by [@​gr2m](https://togithub.com/gr2m) in [processing/p5.js#6341 - refine canvas' type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6328 - MouseEvent, WheelEvent and KeyboardEvent type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6329 - fixed-wrong-capture-size-and-freeze-issue by [@​Prateek93a](https://togithub.com/Prateek93a) in [processing/p5.js#5159 - add more event type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6379 - Main by [@​j-adel](https://togithub.com/j-adel) in [processing/p5.js#6374 - Update labeler Github Action by [@​stampyzfanz](https://togithub.com/stampyzfanz) in [processing/p5.js#6395 - add unregisterMethod function by [@​capGoblin](https://togithub.com/capGoblin) in [processing/p5.js#6426 - add before/after preload and setup by [@​capGoblin](https://togithub.com/capGoblin) in [processing/p5.js#6433 - Fix: Misleading error message when NaN passed by [@​capGoblin](https://togithub.com/capGoblin) in [processing/p5.js#6464 - Support pixel density on p5.Image (fixes issue [#​6114](https://togithub.com/processing/p5.js/issues/6114)) by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6447 - Fix orphan canvas when sketch is removed before canvas creation by [@​limzykenneth](https://togithub.com/limzykenneth) in [processing/p5.js#6355 ##### Other Documentation Update - Fixed GitHub capitalization typo in contributor_docs by [@​SilasVM](https://togithub.com/SilasVM) in [processing/p5.js#6284 - Fixing typo in "What are issues?" by [@​snwarner22](https://togithub.com/snwarner22) in [processing/p5.js#6288 - Fixed GitHub spelling in CONTRIBUTING.md by [@​SilasVM](https://togithub.com/SilasVM) in [processing/p5.js#6295 - Fixed grammatical errors in contributor_guidelines.md by [@​thatguyseven](https://togithub.com/thatguyseven) in [processing/p5.js#6296 - Update documentation_style_guide.md with new guideline by [@​zelf0](https://togithub.com/zelf0) in [processing/p5.js#6334 - add missing code contributors to all contributors in README and `.all-contributors.rc` file by [@​gr2m](https://togithub.com/gr2m) in [processing/p5.js#6349 - docs(all-contributors): remove [@​stellartux](https://togithub.com/stellartux) as requested by [@​gr2m](https://togithub.com/gr2m) in [processing/p5.js#6368 - docs(src/utilities): Use `describe()` instead of `@alt` by [@​Zearin](https://togithub.com/Zearin) in [processing/p5.js#5598 - Fix typo in export path to fix dev mode by [@​mykongee](https://togithub.com/mykongee) in [processing/p5.js#6373 - Improve Readme for future Contributors to codebase by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6260 - Fixed mousePressed() Example Error by [@​Utkarsh3128](https://togithub.com/Utkarsh3128) in [processing/p5.js#6413 - Update README.md by [@​katlich112358](https://togithub.com/katlich112358) in [processing/p5.js#6458 - Fixed typing errors in validate_params.js file's documentation by [@​Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6473 - typo and unused variable from core by [@​benschac](https://togithub.com/benschac) in [processing/p5.js#6476 #### New Contributors 💗 - [@​munusshih](https://togithub.com/munusshih) made their first contribution in [processing/p5.js#6184 - [@​SilasVM](https://togithub.com/SilasVM) made their first contribution in [processing/p5.js#6284 - [@​snwarner22](https://togithub.com/snwarner22) made their first contribution in [processing/p5.js#6288 - [@​thatguyseven](https://togithub.com/thatguyseven) made their first contribution in [processing/p5.js#6296 - [@​OnexiMedina](https://togithub.com/OnexiMedina) made their first contribution in [processing/p5.js#6307 - [@​donaldzhu](https://togithub.com/donaldzhu) made their first contribution in [processing/p5.js#6309 - [@​gr2m](https://togithub.com/gr2m) made their first contribution in [processing/p5.js#6341 - [@​RandomGamingDev](https://togithub.com/RandomGamingDev) made their first contribution in [processing/p5.js#6276 - [@​mykongee](https://togithub.com/mykongee) made their first contribution in [processing/p5.js#6373 - [@​j-adel](https://togithub.com/j-adel) made their first contribution in [processing/p5.js#6374 - [@​meezwhite](https://togithub.com/meezwhite) made their first contribution in [processing/p5.js#6401 - [@​dewanshDT](https://togithub.com/dewanshDT) made their first contribution in [processing/p5.js#6403 - [@​Utkarsh3128](https://togithub.com/Utkarsh3128) made their first contribution in [processing/p5.js#6413 - [@​KeyboardSounds](https://togithub.com/KeyboardSounds) made their first contribution in [processing/p5.js#6420 - [@​capGoblin](https://togithub.com/capGoblin) made their first contribution in [processing/p5.js#6426 - [@​Gaurav-1306](https://togithub.com/Gaurav-1306) made their first contribution in [processing/p5.js#6446 - [@​katlich112358](https://togithub.com/katlich112358) made their first contribution in [processing/p5.js#6455 - [@​Garima3110](https://togithub.com/Garima3110) made their first contribution in [processing/p5.js#6473 - [@​benschac](https://togithub.com/benschac) made their first contribution in [processing/p5.js#6476 - [@​perminder-17](https://togithub.com/perminder-17) made their first contribution in [processing/p5.js#6488 - [@​lakshay451](https://togithub.com/lakshay451) made their first contribution in [processing/p5.js#6493 **Full Changelog**: processing/p5.js@v1.7.0...v1.8.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://togithub.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMS4wIiwidXBkYXRlZEluVmVyIjoiMzcuMzUuMiIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==--> Co-authored-by: Renovate Bot <bot@renovateapp.com>
Resolves #4820
Continuation of #6237
Changes (in progress):
filter()
implementation with those shader filtersfilter()
(This PR is a working draft that's part of the GSoC 2023 project 'Supporting shader-based filters in p5.js", mentored by @aferriss and @aceslowman)
PR Checklist
npm run lint
passes